<template>
    <el-card>
        <el-button type="primary" size="large" style="width: 100%"
                   @click="create">新建项目
        </el-button>
        <div v-loading="loading">
            <div v-if="projectList.length" class="list">
                <el-table :data="projectList" style="width: 100%" stripe lazy highlight-current-row
                           @row-click="check" :row-key="row => row.id">
                    <el-table-column fixed type="index" label="序号" width="75px" align="center"/>
                    <el-table-column prop="types" label="类型" width="120px" align="center"/>
                    <el-table-column prop="name" label="名称" min-width="200px" align="center"/>
                    <el-table-column prop="grade" label="立项等级" width="120px" align="center" sortable>
                        <template #default="{row}">
                            <el-tag>{{ GRADE[row.grade] }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="status" label="状态" width="100px" align="center" sortable>
                        <template #default="{row}">
                            <el-tag :type="STATUS[row.status].type">{{ STATUS[row.status].name }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="reimbursementLimit" label="报销额度" width="120px" align="center" sortable/>
                    <el-table-column prop="startTime" :formatter="formattedDate" label="发布日期" width="120px" align="center" sortable/>
                    <el-table-column label="操作" fixed="right" width="200px" align="center">
                        <template #header>
                            <el-tooltip trigger="hover" placement="top">
                                <template #content>
                                    <span>项目申请审核后，将由指导老师审核是否通过</span>
                                </template>
                                <el-button link><el-icon><InfoFilled/></el-icon></el-button>
                            </el-tooltip>
                            操作
                        </template>
                        <template #default="{row}">
                            <div style="display: grid; grid-template-columns: 1fr 1fr;gap: 0.1rem 0.5rem">
                                <el-button type="primary" size="small" @click.native.stop="applyFor(row)" :disabled="row.status===1">申请审核</el-button>
                                <el-button bg type="primary" size="small" @click.native.stop="receiptManage(row)" column-key>发票报销</el-button>
                                <el-button type="primary" size="small" @click.native.stop="edit(row)">编辑</el-button>
                                <el-button type="danger" size="small" @click.native.stop="remove(row)">删除</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <el-empty v-else :image-size="200"/>
        </div>
        <Pagination :total="total" v-model:currentPage="currentPage" v-model:pageSize="pageSize"
                    v-model:projectList="projectList" v-model:loading="loading"/>
    </el-card>
    <CreateProject v-model:show="createShow" @reload="getProjectList()"/>
    <EditProject v-model:show="editShow" :id="id" @reload="getProjectList()"/>
</template>

<script setup>
import {onMounted, ref} from 'vue'

import {useRouter} from "vue-router";
import {useUserStore} from "@/stores/user";
//项目窗口
import CreateProject from "@/views/User/MyProject/CreateProject/index.vue"
import EditProject from "@/views/User/MyProject/EditProject/index.vue"
//分页
import Pagination from "@/views/User/MyProject/components/Pagination.vue"

//api接口
import {applyForProjectApi, deleteProjectApi, getProjectListByHostApi} from "@/apis/project";
import {getProjectGrade, getProjectStatus} from "@/apis/enum";
import {InfoFilled} from "@element-plus/icons-vue";

const router = useRouter()

const userStore = useUserStore()

//常量
const STATUS = getProjectStatus()
const GRADE = getProjectGrade()

let createShow = ref(false)
let editShow = ref(false)
//项目列表
let loading = ref(true)
let projectList = ref([])

//分页信息
let total = ref(0)
let currentPage = ref(1)
let pageSize = ref(10)

//获取创建的项目列表数据
const getProjectList = async () => {
    const res = await getProjectListByHostApi(currentPage.value, pageSize.value)
    projectList.value = res.data.records
    total.value = res.data.total
    loading.value = false

}
const create = () => {
    createShow.value = true
}
let id = ref("")
const edit = row => {
    id.value = row.id
    editShow.value = true
}

const remove = row => {
    ElMessageBox.confirm(
        '确定删除吗?',
        'Warning',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(async () => {
            await deleteProjectApi(row.id)
            ElMessage.success("删除成功")
            projectList.value.splice(projectList.value.findIndex(value => value.id === row.id), 1)
        }
    ).catch()
}
const check = row => {
        const {href} = router.resolve({
            name: "previewMyProject",
            params: {id: row.id}
        })
        window.open(href, "_blank")
}
const receiptManage = row => {
    const {href} = router.resolve({
        name: "receiptManage",
        params: {id: row.id}
    })
    window.open(href, "_blank")
}
const applyFor = row => {
    applyForProjectApi(row.id).then(async () => {
        ElMessage.success("申请审核成功")
        await getProjectList()
        emits("reload")
    })
}
onMounted(() => {
    getProjectList()
})
//日期格式化
const formattedDate = row => {
    if (!row.startTime) return
    const date = new Date(row.startTime)
    const year = date.getFullYear();
    const month = (date.getMonth() + 1).toString().padStart(2, '0');
    const day = date.getDate().toString().padStart(2, '0');
    return `${year}-${month}-${day}`
}
</script>

<style scoped lang="scss">

.list {
    margin: 1em 0;
}
.el-button{
    margin-bottom: 2px;
}
.el-button+.el-button{
    margin-left: 0;
}
.cell{
    display: grid;
    grid-auto-columns: 1fr 1fr;
}
</style>

